<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h4 class="modal-title">{{{ $title }}}</h4>
</div>
<div class="portlet modal-body portlet-body form">
    <!-- BEGIN FORM-->
    <form action="{{ $url }}" class="form-horizontal" id="form-options" method="post">
        <div class="form-body">
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="alert"></button>
                {{ trans('validation.custom.error-title') }}
            </div>
            <div class="alert alert-success display-hide">
                <button class="close" data-close="alert"></button>
                <span></span>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-3" for="key">{{ trans('options.key') }} <span class="required">*</span></label>
                <div class="col-md-9">
                    <input type="text" name="key" id="key" {{ Route::currentRouteName() == 'option-edit' ? 'readonly' : null }} class="form-control" value="{{{ @$oOption->key }}}"/>
                </div>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-3" for="data">{{ trans('options.name') }} <span class="required">*</span></label>
                <div class="col-md-9">
                    <input type="text" name="data" id="name" class="form-control" value="{{{ @$oOption->data }}}"/>
                </div>
            </div>
            <div class="form-group" style="margin-left: 0; margin-right: 0;">
                <label class="control-label col-md-3" for="status">{{ trans('options.status') }}</label>
                <div class="col-md-9">
                    <select name="status" id="status" class="form-control">
                        <option value="PUBLISHED" {{{ $oOption->status == 'PUBLISHED'                      ? 'selected' : null }}} >{{ trans('options.PUBLISHED') }}</option>
                        <option value="UNPUBLISH" {{{ $oOption->status == 'UNPUBLISH' || !$oOption->status ? 'selected' : null }}} >{{ trans('options.UNPUBLISH') }}</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
    <!-- END FORM-->
</div>
<div class="modal-footer">
    <button type="button" class="btn default btn-close-modal" data-dismiss="modal">{{ trans('system.button.cancel') }}</button>
    <button type="button" class="btn blue btn-new-options">{{ trans('system.button.submit') }}</button>
</div>
<script type="text/javascript">
    
    var form = $('#form-options');
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);
    
    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            key: {
                required: true
            },
            data: {
                required: true
            }
        },
        messages: {
            key: {
                required: "{{ trans('validation.required', ['attribute' => trans('options.key') ]) }}"
            },
            data: {
                required: "{{ trans('validation.required', ['attribute' => trans('options.name') ]) }}"
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit              
            success.hide();
            error.show();
            Metronic.scrollTo(error, -200);
        },

        errorPlacement: function (error, element) { // render error placement for each input type
            if (element.parent(".input-group").size() > 0) {
                error.insertAfter(element.parent(".input-group"));
            } else if (element.attr("data-error-container")) { 
                error.appendTo(element.attr("data-error-container"));
            } else if (element.parents('.radio-list').size() > 0) { 
                error.appendTo(element.parents('.radio-list').attr("data-error-container"));
            } else if (element.parents('.radio-inline').size() > 0) { 
                error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
            } else if (element.parents('.checkbox-list').size() > 0) {
                error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
            } else if (element.parents('.checkbox-inline').size() > 0) { 
                error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
            } else {
                error.insertAfter(element); // for other inputs, just perform default behavior
            }
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
            .closest('.form-group').addClass('has-error'); // set error class to the control group   
        },

        unhighlight: function (element) { // revert the change done by hightlight
                    
        },

        success: function (label, element) {
            var icon = $(element).parent('.input-icon').children('i');
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            icon.removeClass("fa-warning").addClass("fa-check");
        },

        submitHandler: function (form) {
            success.show();
            error.hide();
        }
    });

    $('.btn-new-options').click(function () {
        if (!form.valid()) { return; }
        
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'json'
        }).done(function(response) {
            if (response.status == 200) {
                success.find('span').text(response.message);
                success.show();
                error.hide();
                $('.btn-close-modal').click();
            }
            else {
                error.find('span').text(response.message);
                error.show();
                success.hide();
            }
        })
        .fail(function() {
            error.find('span').text('Check Your Connection.');
            error.show();
            success.hide();
        });
    });
</script>